<template>
    <div class="containers">
        <process-designer
          :key="designerOpen"
          style="border:1px solid rgba(0, 0, 0, 0.1);"
          ref="modelDesigner"
          v-loading="designerData.loading"
          :bpmnXml="designerData.bpmnXml"
          :designerForm="designerData.form"
          @save="onSaveDesigner"
        />
    </div>
  </template>
  
  <script>
 

  // import {savaProcess} from '@/api/erp/wrokflow/process';
  import {xmlStr} from './mock/xmlStr'; //引用xml字符串

  import ProcessDesigner from '@/components/ProcessDesigner';
  import ProcessViewer from '@/components/ProcessViewer'
   
  export default {
    name: "designProcess",
    components: {
    ProcessDesigner,
    ProcessViewer,
  },
    data() {
      return{
        designerOpen: false,
        designerData: {
          loading: false,
          bpmnXml: '',
          modelId: null,
          form: {
            appType: [],
            processName: null,
            processKey: null,
            prefix:'activiti'
          }
        },
        designerModelId: null,
      }
    },
    created() {
    },
    mounted(){
        this.init()
    },
    methods: {
       /** 设计按钮操作 */
      init(row) {
        var row={
          modelName:"请购流程",
          modelId:"qglc_1001",
          modelId:"qglc"
        }
        console.log("handleDesigner row",row);
        this.designerData.title = "流程设计 - " + row.modelName;
        this.designerData.modelId = row.modelId;
        this.designerData.form = {
          appType:  [],
          processName: row.modelName,
          processKey: row.modelKey,
          prefix:'activiti'
        }
        if (row.modelId) {
          this.designerData.loading = true;
        
            this.designerData.bpmnXml = xmlStr || '';
            this.designerData.loading = false;
            this.designerOpen = true;
          
        }
    },
    onSaveDesigner(bpmnXml) {
      this.bpmnXml = bpmnXml;
      let dataBody = {
        modelId: this.designerData.modelId,
        bpmnXml: this.bpmnXml
      }
      this.$confirm("是否将此模型保存为新版本？", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否'
      }).then(() => {
        this.confirmSave(dataBody, true)
      }).catch(action => {
        if (action === 'cancel') {
          this.confirmSave(dataBody, false)
        }
      })
    },

    confirmSave(dataBody){
      // savaProcess(dataBody).then(Response=>{
      //     //保存成功做的事情
      // });
    }

    }
  };
  </script>
  
  <style rel="stylesheet/scss" lang="scss">

  </style>
  